Live Code Editor

1
"use client";
2
3
import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from @/components/ui/Resizable;
4
import {FileExplorer} from @avalon/CodeEditor/FileExplorer;
5
import {SideBar} from @avalon/CodeEditor/SideBar;
6
import {TitleBar} from @avalon/CodeEditor/TitleBar;
7
import {SandpackCodeEditor, SandpackLayout, SandpackProvider, SandpackProviderProps} from "@codesandbox/sandpack-react";
8
import {ReactElement} from "react";
9
10
type CodeEditorProps = SandpackProviderProps & {
11
    autorun?: boolean,
12
    title?: string,
13
}
14
15
export function CodeEditor({autorun, title, ...props}: CodeEditorProps): ReactElement {
16
    return <div className="code-sandbox min-h-max w-full">
17
        <SandpackProvider {...props}>
18
            <SandpackLayout className="!-mx-4 !rounded-none sm:!mx-0 sm:!rounded-lg">
19
                <TitleBar title={title}/>
20
                <ResizablePanelGroup
21
                    direction="vertical"
22
                    className="min-h-screen border"
23
                >
24
                    <ResizablePanel defaultSize={60} minSize={25} collapsible collapsedSize={0}>
25
                        <ResizablePanelGroup
26
                            direction="horizontal"
27
                        >
28
                            <ResizablePanel defaultSize={25} minSize={10} maxSize={50}>
29
                                <FileExplorer extended={true}/>
30
                            </ResizablePanel>
31
                            <ResizableHandle withHandle className="z-50"/>
32
                            <ResizablePanel defaultSize={75}>
33
                                <SandpackCodeEditor
34
                                    style={{
35
                                        height: "100%",
36
                                        minWidth: "100%",
37
                                    }}
38
                                    showLineNumbers
39
                                    showTabs
40
                                    closableTabs
41
                                    showInlineErrors
42
                                    showRunButton={false}
43
                                />
44
                            </ResizablePanel>
45
                        </ResizablePanelGroup>
46
                    </ResizablePanel>
47
                    <ResizableHandle withHandle/>
48
                    <ResizablePanel collapsible collapsedSize={4} defaultSize={40} minSize={25}>
49
                        <SideBar/>
50
                    </ResizablePanel>
51
                </ResizablePanelGroup>
52
            </SandpackLayout>
53
        </SandpackProvider>
54
    </div>;
55
}